<script setup>
import { reactive, toRefs } from 'vue'

// toRefs
/*
 作用：数据转换成ref格式(对象中的每个属性都转换成了ref格式)
    {a:1,b:2}
    import {toRefs} from 'vue'
   const {a,b}=toRefs({a:1,b:2})={a:{value:1},b:{value:2}}  
   a={value:1}
   b={value:2}


*/
const form = reactive({
  name: '张三',
  age: 18
})

const { name, age } = toRefs(form)
// name={value:'张三'}  age={value:18}
console.log(name.value)
const obj = { num: 1 }
const { num } = toRefs(obj)
console.log('toRefs', num)
</script>

<template>
  <div class="app-page">app</div>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <button @click="age++">点击修改age</button>
</template>

<style lang="scss" scoped></style>
